<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
</head>
<body>
    <fieldset>
        <legend>
            Vue生命周期
        </legend>
        <div id="app">
            <p>{{ message }}</p>
        </div>
    </fieldset>

</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，
     我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。
     * 如果使用过jQuery，一定知道它的ready()方法，比如以下示例：
         $(document).ready (function() {
            DOM 加载完后，会执行这里的代码
         }
     Vue 的生命周期钩子与之类似，比较常用的有：
     • created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。
     • mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
     • beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
     */
    var app = new Vue({
        el:"#app",
        data:{
            message:"孤傲苍狼"
        },
      /*  beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message)
        },*/
        /**
         * 实例创建完成后调用
         */
        created:function () {
            console.group('created 创建完毕状态(实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el还不可用)===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
      /*  beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },*/
        /**
         *
         * 挂载到实例上后调用
         */
        mounted:function () {
            console.group('mounted 挂载结束状态(el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。)===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
       /* beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },*/
       /* updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },*/
        /**
         * 实例销毁之前调用
         */
        beforeDestroy:function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。");
        },
       /* destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }*/
    });
</script>